-
Notifications
You must be signed in to change notification settings - Fork 320
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fixes tabs keyboard navigation bug in IE8 #1359
Merged
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1359
May 17, 2019 10:32
Inactive
NickColley
reviewed
May 17, 2019
NickColley
reviewed
May 17, 2019
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1359
May 17, 2019 10:43
Inactive
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1359
May 17, 2019 10:46
Inactive
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1359
May 17, 2019 11:06
Inactive
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1359
May 17, 2019 13:45
Inactive
NickColley
reviewed
May 17, 2019
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1359
May 17, 2019 14:56
Inactive
NickColley
approved these changes
May 20, 2019
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice work 👍
In IE8, the browser could not find the next/previous tab because it does not support `nextElementSibling` and `previousElementSibling` DOM traversal methods. To fix it I applied a polyfill for it. Once the browser could find the tab we then had to find the `firstChildElement` (i.e the anchor element) to add/edit the various data attributes to show/hide the tab panel. Again IE8 doesn't support it and instead of introducing another polyfill I used `querySelector instead to look up the "a". I assumed the first element would always be anchor for navigation purposes and also the nunjucks template uses an anchor with the class name that I'm looking up.
I've added two new files polyfill files although they didn't come directly from polyfill.io they were based off a PR that was merged in the library but not included in the new polyfill-library repo. I've added comments pointing to the original pull request for the detection and for the polyfill.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
In IE8, the browser could not find the next/previous tab because it does
not support
nextElementSibling
andpreviousElementSibling
DOM traversalmethods. To fix it I applied a polyfill for it.
Once the browser could find the tab we then had to find the
firstChildElement
(i.e the anchor element) to add/edit the various data attributes to show/hide
the tab panel. Again IE8 doesn't support it and instead of introducing another
polyfill I used `querySelector instead to look up the "a". I assumed the
first element would always be anchor for navigation purposes and also the
nunjucks template uses an anchor with the class name that I'm looking up.
Before:
After
fixes: #1327
👉 https://govuk-frontend-review-pr-1359.herokuapp.com/components/tabs
👉 https://govuk-frontend-review-pr-1359.herokuapp.com/components/tabs/preview